package cn.xxstudy.compose.material

import android.os.Bundle
import androidx.activity.compose.setContent
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.foundation.clickable
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Close
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.Menu
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import cn.xxstudy.compose.ui.theme.ComposeDemoTheme
import kotlinx.coroutines.launch

/**
 * @author ：wuxinxi on 2021/3/4 .
 * @packages ：cn.xxstudy.compose.material .
 * TODO:背景出现在应用程序中所有其他表面的后面，显示上下文和可操作的内容。
 * 它由两个表面组成：背面层和正面层。
 * 底层显示动作和上下文，这些动作和上下文控制并通知顶层的内容
 */
class SimpleBackdropScaffoldActivity : AppCompatActivity() {
    @ExperimentalMaterialApi
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposeDemoTheme() {
                Surface(color = MaterialTheme.colors.primary) {
                    BackdropScaffoldComponent()
                }
            }
        }
    }
}

@ExperimentalMaterialApi
@Composable
fun BackdropScaffoldComponent() {
    val scope = rememberCoroutineScope()
    val selection = remember { mutableStateOf(1) }
    val scaffoldState = rememberBackdropScaffoldState(BackdropValue.Concealed)
    BackdropScaffold(
        scaffoldState = scaffoldState,
        appBar = {
            TopAppBar(
                title = { Text(text = "backdrop scaffold") },
                navigationIcon = {
                    if (scaffoldState.isConcealed) {
                        IconButton(onClick = { scope.launch { scaffoldState.reveal() } }) {
                            Icon(Icons.Default.Menu, Icons.Default.Menu.name)
                        }
                    } else {
                        IconButton(onClick = { scope.launch { scaffoldState.conceal() } }) {
                            Icon(Icons.Default.Close, Icons.Default.Menu.name)
                        }
                    }
                },
                actions = {
                    var clickCount by remember { mutableStateOf(0) }
                    IconButton(onClick = {
                        scope.launch {
                            scaffoldState.snackbarHostState.showSnackbar(
                                "Snackbar #${++clickCount}"
                            )
                        }
                    }) {
                        Icon(Icons.Default.Favorite, Icons.Default.Favorite.name)
                    }
                }
            )
        },
        backLayerContent = {
            LazyColumn {
                items(5) {
                    ListItem(
                        Modifier.clickable {
                            selection.value = it
                            scope.launch { scaffoldState.conceal() }
                        },
                        text = { Text(text = "Select $it") }
                    )
                }
            }
        },
        frontLayerContent = {
            Text("Selection: ${selection.value}")
            LazyColumn {
                items(50) {
                    ListItem(
                        text = { Text("Item $it") },
                        icon = {
                            Icon(
                                Icons.Default.Favorite,
                                contentDescription = Icons.Default.Favorite.name
                            )
                        }
                    )
                }
            }
        }
    )
}